<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>JSON-在线JSON解析与校验格式化工具</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jsoneditor css -->
    <link href="http://cdn.bootcss.com/jsoneditor/5.7.0/jsoneditor.min.css" rel="stylesheet">
</head>

<body>

<div class="container">

    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">JSON解析</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Nav header</li>
                            <li><a href="#">Separated link</a></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
                    <li><a href="../navbar-static-top/">Static top</a></li>
                    <li><a href="../navbar-fixed-top/">Fixed top</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>

    <!-- Main component for a primary marketing message or call to action -->
    <div class="jsonEditor">
        <div class="row">
            <div class="col-md-5">
                <textarea class="form-control" id="jsonContent" rows="15"></textarea>
                <button type="button" class="submitBtn btn btn-default btn-sm">submit</button>
            </div>
            <div class="col-md-7">
                <div id="jsonContainer"></div>
            </div>
        </div>
    </div>

</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- jsoneditor js -->
<script src="http://cdn.bootcss.com/jsoneditor/5.7.0/jsoneditor.min.js"></script>

<script>
    // create the editor
    var jsonContainer = document.getElementById("jsonContainer");
    var options = {
        mode: 'tree',
        modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
        onError: function (err) {
            alert(err.toString());
        },
        onModeChange: function (newMode, oldMode) {
            console.log('Mode switched from', oldMode, 'to', newMode);
        }
    };
    var JsonEditor = new JSONEditor(jsonContainer, options);

    var jsonContent = $('#jsonContent').val();
    if (jsonContent == ''){
        jsonContent = '{"id": "123","comments": "6", "name": "sample", "Usage": "请在此输入JSON字符串..."}';
        $('#jsonContent').val(jsonContent);
        $('.submitBtn').click();
        var json = JSON.parse($('#jsonContent').val());
        JsonEditor.set(json);

        var json = JsonEditor.get();
    }
    $(".submitBtn").on("click", function( data ) {

        // set json
        var json = JSON.parse($('#jsonContent').val());
//        console.log(json);
        JsonEditor.set(json);

        // get json
        var json = JsonEditor.get();
        console.log(json);
    });
</script>
</body>
</html>